﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>账号管理</title>
    <link href="~/Content/css/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/easyui/themes/icon.css" rel="stylesheet" />
    <!--修改过的bootstrap-->
    <link href="~/Content/css/bootstrapmin.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
</head>
<body>
    <div class="easyui-layout" fit="true">
        @*左边组织树导航*@
        <div data-options="region:'west',split:true" style="width: 200px;">
            <div id="orgTree"></div>
        </div>
        <div data-options="region:'center',border:false,split:false">
            <div class="easyui-layout" fit="true">
                <div data-options="region:'north',split:true" style="height: 120px;">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="txtAccountS" class="col-md-2 control-label">账号：</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" id="txtAccountS" />
                            </div>
                            <label for="txtNameS" class="col-md-2 control-label">姓名：</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" id="txtNameS" />
                            </div>
                            <label for="txtTelephoneS" class="col-md-2 control-label">电话：</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" id="txtTelephoneS" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ddlIsEnableS" class="col-md-2 control-label">是否可用：</label>
                            <div class="col-md-2">
                                <select class="form-control" id="ddlIsEnableS">
                                    <option value="-1">全部</option>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" onclick="search()">查询</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" onclick="reset()">重置</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" onclick="$('#importDialog').dialog('open')">导入</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" onclick="exportData()">导出</a>
                            </div>
                        </div>
                    </form>
                </div>
                @*中间内容*@
                <div data-options="region:'center',border:false,split:false">
                    <div id="maingrid">
                    </div>
                </div>
            </div>
        </div>
    </div>
<div id="maindialog" style="padding: 10px;">
    <form class="form-horizontal">
        <div class="form-group">
            <label for="txtAccount" class="col-md-2 control-label">账号：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtAccount"/>
            </div>
            <label for="txtName" class="col-md-2 control-label">姓名：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtName"/>
            </div>
        </div>
        <div class="form-group">
            <label for="txtEmail" class="col-md-2 control-label">邮箱：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtEmail"/>
            </div>
            <label for="txtPhone" class="col-md-2 control-label">电话：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtPhone"/>
            </div>
        </div>
        <div class="form-group">
            <label for="txtQQ" class="col-md-2 control-label">QQ：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtQQ"/>
            </div>
            <label for="ddlIsEnable" class="col-md-2 control-label">是否可用：</label>
            <div class="col-md-4">
                <select class="form-control" id="ddlIsEnable">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="txtOrgId" class="col-md-2 control-label">分配组织：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtOrgId"/>
            </div>
            <label for="txtRoleId" class="col-md-2 control-label">分配角色：</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="txtRoleId"/>
            </div>
        </div>
    </form>
</div>
<div id="importDialog">
    <input type="file" name="file" id="uploadFile" multiple class="file-loading" />
</div>
    <script src="~/Content/js/jquery-2.2.3.min.js"></script>
    <script src="~/Content/easyui/jquery.easyui.min.js"></script>
    <script src="~/Content/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="~/Content/bootstrap-fileinput/js/locales/zh.js"></script>
    <script>
        $(function () {
            var parentId = 0;
            bindgrid();
            bindOrgtree(parentId);
            binddialog();

            bindValidate();

            importExcel();
        });
        function bindgrid() {
            $("#maingrid").datagrid({
                nowrap: true,
                fit: true,
                fitColumns: true,
                autoRowHeight: true,
                striped: true,//是否显示斑马线效果
                //singleSelect: true, //是否單選
                //collapsible: true,//是否可折叠
                pagination: true, //分頁控制
                pageSize: 20,
                rownumbers: true, //行號
                //showFooter: true,
                method: 'get',
                url: '/Account/GetUserAccounts?t=' + Math.random(),
                loadMsg: '数据正在加载...',
                columns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'Account', title: '账号', width: 100 },
                    { field: 'Name', title: '名字', width: 100 },
                    { field: 'NickName', title: '昵称', width: 130 },
                    { field: 'Email', title: '邮箱', width: 130 },
                    { field: 'Telephone', title: '电话', width: 130 },
                    { field: 'QQ', title: 'QQ', width: 130 },
                    {
                        field: 'IsEnable', title: '是否可用', width: 60, formatter: function (value, row, index) {
                            return value == "1" ? "是" : "否";
                        }
                    }
                ]],
                //onSelect: function (rowIndex, rowData) {
                //    bindtree(0, rowData.RoleId);
                //},
                //onUnselect: function (rowIndex, rowData) {
                //    bindtree(0, 0);
                //},
                toolbar: [{
                    text: '增加',
                    iconCls: 'icon-add',
                    handler: function () {
                        $("#maindialog").dialog("open");
                        //$("#txtRoleName").val("");
                        //$("#txtRoleDesc").val("");
                        //$("#ddlIsEnable").val("1");
                    }
                }, '-', {
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: function () {
                        //var rowData = $('#maingrid').datagrid("getSelected");
                        //if (rowData != null) {
                        //    $("#maindialog").dialog("open");
                        //    $("#maindialog").data("RoleId", rowData.RoleId);
                        //    $("#txtRoleName").val(rowData.RoleName);
                        //    $("#txtRoleDesc").val(rowData.RoleDesc);
                        //    $("#ddlIsEnable").val(rowData.IsEnable);
                        //} else {
                        //    alertMsg("请至少选择一项！");
                        //}
                    }
                }, '-', {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        var rows = $('#maingrid').datagrid("getSelections");
                        if (rows.length > 0) {
                            $.messager.confirm('确认对话框', '确定要删除这条记录？', function (r) {
                                if (r) {
                                    deleteAccount(rows);
                                }
                            });
                        } else {
                            alertMsg("请至少选择一项！");
                        }
                    }
                }, '-', {
                    text: '启用/弃用',
                    iconCls: 'icon-remove',
                    handler: function () {
                        var rowData = $('#maingrid').datagrid("getSelected");
                        if (rowData != null) {
                            $.messager.confirm('确认对话框', '确定要修改这条记录？', function (r) {
                                if (r) {
                                    isEnableAccount(rowData);
                                }
                            });
                        } else {
                            alertMsg("请至少选择一项！");
                        }
                    }
                }]
            });
        }
        function bindOrgtree(parentId) {
            $('#orgTree').tree({
                method: "get",
                checkbox: true,
                url: "/OrgManage/GetSysOrgsTreeIsEnable?parentId=" + parentId + '&t=' + Math.random()
                , onClick: function (node) {

                }
            });
        }
        function binddialog() {
            $("#maindialog").dialog({
                title: "保存模组",
                //top: 10,
                //left: ($(window).width() - 600) / 2,
                width: 700,
                height: 280,
                inline: true, //定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面
                iconCls: 'icon-save',
                modal: true,
                draggable: true, //定义是否能够拖拽窗口。
                closed: true,
                buttons: [{
                    text: '保存',
                    iconCls: 'icon-ok',
                    handler: function () {
                        saveAccount();
                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#maindialog").dialog("close");
                        $('#maingrid').datagrid("reload");
                    }
                }]
            });
            $("#importDialog").dialog({
                title: "上传导入",
                inline: true, //定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面
                width: 450,
                height: 200,
                iconCls: 'icon-save',
                modal: true,
                draggable: true, //定义是否能够拖拽窗口。
                closed: true,
                buttons: [ {
                    text: '关闭',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#importDialog").dialog("close");
                    }
                }]
            });
        }
        function bindValidate() {
            $("#txtAccount").validatebox({
                required: true,
                validType: "length[1,30]",
                missingMessage: "账号不能为空",
            });
            $("#txtName").validatebox({
                required: true,
                validType: "length[1,20]",
                missingMessage: "姓名不能为空",
            });
        }
        function isValid() {
            return $("#txtAccount").validatebox("isValid")
            && $("#txtName").validatebox("isValid");
        }
        function saveAccount() {
            if (!isValid()) { return false; }
            var RoleId = $("#maindialog").data("RoleId");
            var account = $("#txtAccount").val();
            var name = $("#txtName").val();
            var email = $("#txtEmail").val();
            var phone = $("#txtPhone").val();
            var qq = $("#txtQQ").val();
            var IsEnable = $("#ddlIsEnable").val();
            var obj = {
                Account: account,
                Name: name,
                Email: email,
                Phone: phone,
                QQ: qq,
                IsEnable: IsEnable
            };
            $.post("/RoleManage/Add", obj, function (data) {
                if (data.CodeId == "100") {
                    window.location.reload();
                } else {
                    alertMsg("保存失败！");
                }
            });
            return true;
        }
        function deleteAccount(rows) {
            if (rows.length > 0) {
                var ids = "";
                for (var i = 0; i < rows.length; i++) {
                    ids = ids + rows[i].RoleId + ",";
                }
                $.post("/RoleManage/Delete", {
                    ids: ids
                }, function (data) {
                    if (data.CodeId == "100") {
                        window.location.reload();
                    } else {
                        alertMsg("删除失败！");
                    }
                });

            }
        }
        function isEnableAccount(row) {
            if (row) {
                $.post("/RoleManage/UpdateIsEnable", {
                    RoleId: row.RoleId
                }, function (data) {
                    if (data.CodeId == "100") {
                        $("#maingrid").datagrid("reload");
                    } else {
                        alertMsg("修改失败！");
                    }
                });

            }
        }

        function saveAccountModule() {
            var rowData = $('#maingrid').datagrid("getSelected");
            var roleId = rowData.RoleId;
            var treeNodes = $('#tree').tree('getChecked', ['checked', 'indeterminate']);
            var ids = [];
            for (var i = 0; i < treeNodes.length; i++) {
                ids.push(treeNodes[i].id);
            }
            $.post("/RoleManage/saveAccountModule", {
                RoleId: roleId,
                Modules: ids.join(',')
            }, function (data) {
                if (data.CodeId == "100") {
                    //$("#maingrid").datagrid("reload");
                    alertMsg("保存成功！");
                } else {
                    alertMsg("保存失败！");
                }
            });
        }

        function importExcel() {
            $("#uploadFile").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/TestUpload/UpLoadProcess", //上传的地址
                uploadExtraData: { addressKey: 1, callBack: "Account/ImportAccountData" },//上传附加form值
                //allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                //allowedFileTypes: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],//允许的文件类型
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                showPreview: false,//是否显示预览，上传文件不需要，上传图片可以使用
                showRemove: true,//默认true,是否显示移除按钮
                browseClass: "btn btn-primary", //按钮样式
                //dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
                //,initialPreview: //预览初始化窗口时显示的图片或文件
            });
            //导入文件上传完成之后的事件
            $("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
                var resData = data.response;
                if (resData && resData.CodeId) {
                    alertMsg(resData.Description);
                    return;
                }
                if (resData) {
                    if (resData.ErrorDesc) {
                        alertMsg(resData.ErrorDesc);
                        return;
                    }
                    $("#importDialog").dialog("close");
                }
            });
        }
        function exportData() {
            var account = $("#txtAccountS").val();
            var name = $("#txtNameS").val()
            , telephone = $("#txtTelephoneS").val()
            , isenable = $("#ddlIsEnableS").val();
            var orgNode = $('#orgTree').tree("getSelected");
            var nodeId = -1;
            if (orgNode) {
                nodeId = orgNode.id;
            }
            window.location.href = "/Account/Export?account=" + account + "&name="
                + name + "&phone=" + telephone + "&isenable=" + isenable + "&orgId=" + nodeId;
        }
        function alertMsg(msg) {
            $.messager.alert('提示', msg, 'info');
        }
    </script>
</body>
</html>
